<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <a-row>
      <a-col :span="12"><span style="font-size: 19px;font-weight: 600;line-height: 25px;">通知列表</span></a-col>
      <a-col :span="12"><a-button type="primary" style="float: right;margin-right: 5px" @click="onFinish">提交</a-button></a-col>
    </a-row>
    <br>
  </div>

  <div class="workContent">
    <a-card title="课程信息" overflow="auto">
      <a-form
          :model="newsInfo"
          name="basic"
          :label-col="{ offset: 1, span: 4 }"
          :wrapper-col="{ span: 18, offset: 1 }"
          autocomplete="off"
      >
        <a-row>
          <a-col :span="10" >
            <a-form-item label="通知名称" name="title">
              <a-input class="card1-input" v-model:value="newsInfo.title" placeholder="请输入通知名称" />
            </a-form-item>

            <a-form-item label="通知类别" name="type">
              <a-radio-group v-model:value="newsInfo.type" button-style="solid">
                <a-radio-button v-for="type in dictList" :value="type.dictId">{{ type.dictValue.substring(0,3) }}</a-radio-button>
              </a-radio-group>
            </a-form-item>

            <a-form-item name="image">
              <template v-slot:label>
                <span style="line-height: 180px">通知封面</span>
              </template>

              <input class="input_image left" id="file" type="file" @change="changeImg" accept="image/*" />
              <img class="show_input_image left" v-if="newsInfo.image != ''" :src="newsInfo.image" />
              <img class="show_input_image left" v-if="newsInfo.image ==''" src="/img/addImg.png" />

            </a-form-item>

          </a-col>
          <a-col :span="13" :offset="1">
            <a-form-model-item :wrapper-col="{ offset: 2, span: 24 }" name="introduction">
              <div>通知内容：</div><br>
              <WangEditor
                  class="WangEditor"
                  @select="getRich"
                  ref="childrenRef"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div><br>
</template>

<script>
import {reactive, ref, toRefs} from "vue";
import WangEditor from '../../../components/WangEditor.vue'
import {getDict} from "@/utils/file";
import {message} from "ant-design-vue";
import axios from "axios";
import {useStore} from "vuex";
import {addNew} from "@/utils/new";

export default {
  components: {
    WangEditor
  },
  setup(){

    const state = reactive({
      introduction: '',
      fetching: false,
    })

    const newsInfo = reactive({
      title: '',
      author: '',
      content: '',
      image: '',
      type: 1,
    })

    const store = useStore()
    newsInfo.author = store.state.userName


    const dictList = ref([])

    getDict('notice').then(res => {
      if (res.status == 200)
        dictList.value = res.data.data
    })

    const searchList = ref([])

    const getRich = function (value){
      state.introduction = value
      console.log(value)
    }

    const childrenRef = ref(null)
    const onFinish = function (){
      newsInfo.content = state.introduction
      let notice = {
        title: newsInfo.title,
        author: newsInfo.author,
        content: newsInfo.content,
        image: newsInfo.image,
        type: newsInfo.type,
      }
      addNew(notice).then(res => {
        if (res.status == 200){
          message.success('新增成功')
          childrenRef.value.abc()
          newsInfo.type = 1
          newsInfo.image = ''
          newsInfo.content=''
          newsInfo.title = ''
        }else{
          message.error('新增失败，请刷新重试')
        }
      })
      console.log(newsInfo)
    }


    const changeImg = function (){
      let imgInput = document.getElementById('file')

      if (!imgInput.value){
        message.error('没有选择图片')
      }

      let file = imgInput.files[0];
      let size = file.size;
      if (size >= 1 * 1024 * 1024) {
        message.error('文件大小超出限制')
        return false;
      }
      if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
        message.error('不是有效的图片')
        return;
      }
      let formData = new FormData()
      formData.append('file',file)

      axios.post('http://121.37.0.16:8080/api/file/upload',formData,{
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.code == 0){
          newsInfo.image = 'http://121.37.0.16:9000/public/'+ res.data.data.fileName[0]
        }
      })
    }

    return{
      ...toRefs(state),
      getRich,
      newsInfo,
      onFinish,
      dictList,
      searchList,
      changeImg,
      childrenRef,
    }
  }
}
</script>

<style scoped>
.workContent{
  width: 96%;margin: 25px auto;
  background-color: #FFFFFF;
  padding: 30px;
}
.show_input_image {
  margin-top: -230px;
  width: 100%;
  height: 230px;
  border: 1px solid #f0f0f0;
}
.input_image {
  position: relative;
  width: 100%;
  height: 230px;
  background-color: blue;
  z-index: 999;
  opacity: 0;
  border-radius: 50%;
}
</style>